<template>
  <view class="chatTips">
    <up-grid :border="false" :col="menu.length">
      <up-grid-item v-for="(item, index) in menu" :key="index">
        <view class="item" @tap="itemClick(item)">
          <image class="item-icon" :src="item.icon"></image>
          <view class="item-text">
            {{ item.name }}
          </view>
        </view>
      </up-grid-item>
    </up-grid>
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
import chat_tips_ai from "@/pagesA/static/images/chat/chat_tips_ai.png";
import chat_tips_select from "@/pagesA/static/images/chat/chat_tips_select.png";

const props = defineProps({
  showMultiSelect: {
    type: Boolean,
    default: true,
  },
});

const menu = computed(() => {
  return props.showMultiSelect
    ? [
        {
          name: "AI回复",
          icon: chat_tips_ai,
          type: "ai",
        },
        {
          name: "多选",
          icon: chat_tips_select,
          type: "select",
        },
      ]
    : [
        {
          name: "AI回复",
          icon: chat_tips_ai,
          type: "ai",
        },
      ];
});

const itemClick = (item: any) => {
  emit("chatTipsClick", item.type);
};

const emit = defineEmits(["chatTipsClick"]);
</script>

<style lang="scss" scoped>
.chatTips {
  margin: 8rpx;
  .item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 128rpx;
    &-icon {
      width: 56rpx;
      height: 56rpx;
    }
    &-text {
      padding-top: 8rpx;
      font-size: 24rpx;
      color: #fff;
      line-height: 28rpx;
    }
  }
}
</style>
